<template>
  <div class="w-full h-full flex flex-wrap overflow-auto p-2">
    <div
      class="flex-grow md:w-1/2 flex flex-wrap justify-center items-center md:pl-12"
    >
      <div class="w-full text-[var(--logo-color)]">
        <div class="w-full mb-6 text-2xl font-bold">发布视频</div>
        <div class="mb-4">
          标题<input
            class="input-style ml-4"
            v-model="videoInfo.title"
            type="text"
            maxlength="11"
          />
          <span>({{ videoInfo.title.length }}/11)</span>
        </div>
        <div class="mb-4">
          <span class="block">描述</span>
          <textarea
            class="w-full h-20 bg-slate-200 rounded-xl outline-none px-4 py-2"
            v-model="videoInfo.description"
            maxlength="50"
          ></textarea>
        </div>
        <div>
          <span>标签选择</span>
          <div>
            <el-checkbox
              v-for="item in itemList.length"
              :key="item"
              v-model="flagList[item - 1]"
              :label="itemList[item - 1]"
              size="large"
            />
          </div>
        </div>
      </div>
      <upload-box class="w-full">
        <el-upload
          class="upload-demo"
          drag
          ref="uploadRef"
          :auto-upload="false"
          :limit="1"
          :on-change="handleSuccess"
          :on-success="uploadSuccess"
          :on-remove="removeFile"
          accept="video/*"
          :action="`${serverConfig.videoServer}/video/publishVideo`"
          method="post"
          :data="videoInfo"
          :headers="headers"
          multiple
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">
            将视频拖到此处 或 <em>点击选择视频</em>
          </div>
        </el-upload>
      </upload-box>
    </div>
    <div
      class="w-1/2 h-full flex-grow flex flex-wrap justify-center items-center"
    >
      <div
        class="w-[17rem] h-[35rem] relative rounded-[2rem] overflow-hidden bg-[#222] px-2 py-4"
      >
        <img
          class="absolute top-0 left-0 w-full h-full"
          src="@/assets/img/mobile-case.png"
          alt=""
        />
        <div class="w-full h-full top-0 left-0 m-auto flex">
          <video autoplay controls :src="previewUrl"></video>
        </div>
      </div>
      <div class="w-full h-[2.5rem] flex justify-center items-center">
        <div
          @click="toUpload"
          class="h-[2.4rem] md:w-1/3 w-[2.4rem] bg-[var(--login-box-color)] md:rounded-lg rounded-full flex justify-center items-center text-[#eeebeb] cursor-pointer hover:bg-[#80339690] active:bg-[#803396b0] select-none text-sm sm:text-base"
        >
          提交
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { UploadFilled } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
// import { publishVideoAPI } from "@/http/api/video";
import serverConfig from "@/http/config";

let videoInfo = reactive({
  title: "",
  cryptoTitle: "",
  description: "",
  type: "0000000000",
});

const headers = {
  userId: localStorage.getItem("userInfo")
    ? JSON.parse(localStorage.getItem("userInfo")).userId
      ? JSON.parse(localStorage.getItem("userInfo")).userId
      : ""
    : "",
};

let previewUrl = ref(null);
const flagList = ref([
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
]);
const itemList = ref([
  "游戏",
  "二次元",
  "美食",
  "运动",
  "幻想",
  "美女",
  "剧情",
  "解说",
  "风景",
  "其他",
]);

let uploadRef = ref(null);

function handleSuccess(file, fileList) {
  videoInfo.cryptoTitle = file.name;
  previewUrl.value = URL.createObjectURL(file.raw);
}

function removeFile(file) {
  previewUrl.value = "";
}

function uploadSuccess(response, file, fileList) {
  if (response.code == 200) {
    ElMessage({
      message: "上传成功！",
      type: "success",
    });
    uploadRef.value.clearFiles();
    previewUrl = "";
  } else {
    ElMessage({
      message: res.message,
      type: "error",
    });
  }
}

function toUpload() {
  if (!previewUrl.value) {
    ElMessage({
      message: "请选择你要上传的视频！",
      type: "warning",
    });
    return;
  }
  let typeNum = 0;
  let pos = 0;
  for (let i in flagList.value) {
    if (flagList.value[i]) {
      typeNum = typeNum | (1 << pos);
    }
    pos++;
  }
  typeNum = typeNum | (1 << pos);
  videoInfo.type = typeNum.toString(2).substring(1, 11);

  if (videoInfo.title.trim() == "") {
    ElMessage({
      message: "请填写视频标题！",
      type: "warning",
    });
    return;
  }

  let flag = false;
  for (let i in flagList.value) {
    if (flagList.value[i]) {
      flag = true;
    }
  }
  if (!flag) {
    ElMessage({
      message: "请现在视频类型！",
      type: "warning",
    });
    return;
  }

  uploadRef.value.submit();

  // publishVideoAPI().then((res) => {
  //   console.log(res);
  // });
}
</script>

<style lang="scss" scoped>
.input-style {
  display: inline-block;
  outline: none;
  width: 12rem;
  border-bottom: 1px solid var(--logo-color);
}
</style>